<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      //文档加载完成
      window.onload = function () {
        //1.获取需要操作的对象
        //表单
        var form = document.querySelector("#form");
        //用户名
        var username = document.querySelector("#username");
        //密码
        var password = document.querySelector("#password");
        
        
        //邮箱
        var email = document.querySelector("#email");

        //2.为表单提交绑定提交事件
        form.onsubmit = function () {
          //3.提交事件中判断每一项是否符合规则

          //用户名 && 密码 && 邮箱 返回true
          return checkUserName() && checkPassWord() && checkEmail();

        };

        //当里面的值发生改变或鼠标移出也可以做一下验证操作
        username.onblur=checkUserName;
        password.onblur=checkPassWord;
        email.onblur=checkEmail;




      };

      //用户名
      function checkUserName(){
       //获取username的value值
       var userNameVal = username.value.trim();
       //提示信息
       var uname = document.querySelector("#uname");

        //通过正则表达式校验
        var reg = /^[a-zA-Z0-9_]{6,12}$/;
        if(!reg.test(userNameVal)){
          uname.style.color="red";
        uname.innerHTML="用户名不符合规范！";
        
        return false;

        }



         uname.style.color="green";
        uname.innerHTML="用户名符合！";
        //都没有问题返回成功
        return true;

      }

      //密码的验证
      function checkPassWord(){
      //获取password的value值
      var passwordVal = password.value.trim();
       //提示信息
       var upass = document.querySelector("#upass");

       //通过正则表达式校验
       var reg =  /^(?=.*d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9]).{4,6}$/;
        if(!reg.test(passwordVal)){
          upass.style.color="red";
          upass.innerHTML="用户名不符合规范！";
          return false;
        }

     
    upass.style.color="green";
    upass.innerHTML="密码符合！";
        //都没有问题返回成功
        return true;
      }

      //邮箱的验证
      function checkEmail(){
       //邮箱value值
       var emailVal = email.value.trim();
       var uemail = document.querySelector("#uemail");

           //通过正则表达式校验
           var reg =  /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;;
        if(!reg.test(emailVal)){
          uemail.style.color="red";
          uemail.innerHTML="用户名不符合规范！";
          return false;
        }

      
       uemail.style.color="green";
       uemail.innerHTML="邮箱符合！";
        //都没有问题返回成功
        return true;
      }



    </script>
  </head>
  <body>
    <form id="form" action="#" method="post">
      <table>
        <tr>
          <td>用户名：</td>
          <td>
            <input
              type="text"
              name="username"
              id="username"
              placeholder="请输入用户名..."
            />
          </td>
          <td><span id="uname">(*请输入您的用户名)</span></td>
        </tr>
        <tr>
          <td>密&nbsp;码：</td>
          <td>
            <input
              type="password"
              name="password"
              id="password"
              placeholder="请输入密码..."
            />
          </td>
          <td><span id="upass">(*请输入您的密码)</span></td>
        </tr>
        <tr>
          <td>邮&nbsp;箱：</td>
          <td>
            <input
              type="email"
              name="email"
              id="email"
              placeholder="请输入邮箱..."
            />
          </td>
          <td><span id="uemail">(*请输入您的邮箱)</span></td>
        </tr>
        <tr>
          <td></td>
          <td>
            <input type="submit" value="注册" />
            <input type="reset" value="清空" />
          </td>
          <td></td>
        </tr>
      </table>
    </form>
  </body>
</html>
